<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title data-i18n="resources.title_componentsRaster_Vue"></title>
		<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
		<script
			include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			src="../../dist/mapboxgl/include-mapboxgl.js"
		></script>
		<style>
			#main {
				margin: 0 auto;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
		<div id="main">
			<sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="1329428269">
				<sm-raster-tile-layer v-bind="rasteLayerOptions"></sm-raster-tile-layer>
				<sm-layer-list position="top-left"></sm-layer-list>
			</sm-web-map>
		</div>
		<script>
			new Vue({
				el: '#main',
				data() {
					var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
					return {
						rasteLayerOptions: {
							layerId: resources.text_myRasterLayer,
							opacity: 0.8,
							visible: true,
							mapUrl: host + '/iserver/services/map-Population/rest/maps/PopulationDistribution',
						},
					};
				},
			});
		</script>
	</body>
</html>
